<template>
  <page-header-wrapper :breadcrumb="breadcrumb(changeBread)">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </page-header-wrapper>
</template>
<script>
export default {
  data () {
    return {
      routes: [],
      changeBread: false
    }
  },
  computed: {
    breadcrumb () {
      const routes = this.routes
      return (changeBread) => {
        if (changeBread) {
          return {
            props: {
              routes,
              itemRender: ({ route, params, routes, paths, h }) => {
                // console.log(route, params, routes, paths, h)
                let jsx = ''
                if (routes.indexOf(route) === routes.length - 1) {
                  jsx = <span>{route.breadcrumbName}</span>
                } else {
                  jsx = <router-link to={route.path}>{route.breadcrumbName}</router-link>
                }
                return jsx
              }
            }
          }
        }
      }
    }
  },
  watch: {
    $route (to) {
      // console.log(to.path)
      this.getPath()
    },
    changeBread (value, oldvalue) {
      // console.log(value, oldvalue)
    }
  },
  mounted () {
    this.getPath()
  },
  methods: {
    getPath () {
      const routePath = this.$route
      const routesList = []
      // console.log(routePath.meta)
      if (routePath.meta.changeBread === true) {
        this.changeBread = true
      } else {
        this.changeBread = false
      }
      for (var i = 0; i < routePath.matched.length; i++) {
        var obj = { path: routePath.matched[i].redirect, breadcrumbName: routePath.matched[i].meta.title }
        routesList.push(obj)
      }
      routesList.splice(-1, 1)
      this.routes = routesList
      // console.log(routesList)
    }
  }
}
</script>
